<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.tianqi {
				width: 120px;
				border: 1px solid #D7E5F7;
				margin: 5px;
				float: left;
			}
			
			.date {
				text-align: center;
				height: 20px;
				line-height: 20px;
				background-color: #F8FBFF;
			}
			
			.p1 {
				text-align: center;
				margin: 5px;
			}
			
			.img {
				width: 40px;
				position: relative;
				top: 0px;
				left: 40px;
				margin: 5px 0px;
			}
		</style>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function showtext() {
				var city = $("#text").val();
				$.ajax({
					type: "get",
					url: "http://v.juhe.cn/weather/index",
					dataType: "jsonp",
					jsonp: "callback",
					data: "cityname="+city+"&dtype=&format=&key=7b68e5f0668cf0b77fccdb32af6c5ab7",
					success: function(data) {
						for (n in data.result.future) {
							var tianqi = $('<div class="tianqi"></div>');
							var ddate = $('<p class="date">' + data.result.future[n].date + data.result.future[n].week + '</p>');
							var img = $('<img class="img" src="img/00.png"/>');
							var p1 = $('<p class="p1">' + data.result.future[n].weather +'</p>');
							var p2 = $('<p class="p1">' + data.result.future[n].temperature +'</p>');
							var p3 = $('<p class="p1">' + data.result.future[n].wind +'</p>');
							tianqi.append(ddate);
							tianqi.append(img);
							tianqi.append(p1);
							tianqi.append(p2);
							tianqi.append(p3);
							$("#show").append(tianqi);
						}
					}
				});
			}
		</script>
	</head>

	<body>
		<input type="text" id="text" value="" />
		<input type="button" id="btn" value="按钮" onclick="showtext()" />
		<div id="show">
			<!--<div class="tianqi">
				<p class="date">2月7日（今天）</p>
				<img class="img" src="img/1.jpg" />
				<p class="p1">阴</p>
				<p class="p1">-2~-4</p>
				<p class="p1">北风3-4 级</p>
			</div>
			<div class="tianqi">
				<p class="date">2月7日（今天）</p>
				<img class="img" src="img/1.jpg" />
				<p class="p1">阴</p>
				<p class="p1">-2~-4</p>
				<p class="p1">北风3-4 级</p>
			</div>-->
		</div>
	</body>

</html>